<template>
  <view class="picker-box flex-column-center" :style="intoStyle">
    <view class="contenter-box">
      <view class="lable-text">{{ $t('TT.ChooseTemp.Temp.Lable') }}</view>
      <picker-view
        mask-class="maskStyle"
        indicator-class="clearBorder"
        indicator-style="height: 45px;"
        class="picker-view"
        :value="[curIndex]"
        @change="chooseTemp"
        @pickstart="startPick"
        @pickend="endPick"
      >
        <picker-view-column>
          <view
            class="picker-item"
            v-for="(item, index) in data"
            :key="index"
            :class="{ active: index === curIndex, activegray: isGray && curIndex > 15 }"
            >{{
              typeof item.value === 'number' && item.value % 1 === 0 && isUnit && !removeZero
                ? item.value + '.0'
                : item.value
            }}</view
          >
        </picker-view-column>
      </picker-view>
      <!-- <view class="unit-box" v-if="isUnit">℃</view> -->
    </view>
  </view>
</template>
<script setup lang="ts">
import type { CSSProperties } from 'vue'

const props = defineProps<{
  data: { value: number | string }[]
  curIndex: number
  isUnit?: boolean
  isGray?: boolean
  intoStyle?: CSSProperties
  removeZero?: boolean
}>()

const emit = defineEmits<{
  (e: 'chooseTemp', curIndex: number): void
  (e: 'pickState', state: boolean): void
}>()

function chooseTemp(e: WechatMiniprogram.PickerChange) {
  let index = e.detail.value[0] as number
  emit('chooseTemp', index)
}
function startPick() {
  emit('pickState', true)
}
function endPick() {
  emit('pickState', false)
}
</script>
<style lang="less">
.picker-box {
  height: 332rpx;
  margin: 0 32rpx;
  margin-bottom: 32rpx;
  font-family: 'PingFang SC';
  font-style: normal;
  box-sizing: border-box;
  background-color: #f4f4f6;
}
.contenter-box {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 24rpx;
  box-sizing: border-box;
}
.lable-text {
  font-weight: 500;
  font-size: 28rpx;
  line-height: 40rpx;
  color: var(--dack-color);
  opacity: 0.6;
}
.picker-view {
  width: 100%;
  height: 248rpx;
  position: relative;
  z-index: 2;
}
.unit-box {
  position: absolute;
  z-index: 1;
  top: calc(50% - 30rpx);
  left: calc(50% + 80rpx);
  height: 100%;
  font-size: 26rpx;
  color: #fff;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.picker-item {
  font-weight: 400;
  font-size: 40rpx;
  text-align: center;
  line-height: 45px;
  height: 45px;
  color: var(--dark-color);
  text-align: center;
  opacity: 1;
}
:deep(.maskStyle) {
  background: transparent;
  color: var(--dack-color);
  -webkit-mask: none;
}
.active {
  font-weight: 600;
  font-size: 56rpx;
  color: var(--primary-color);
  text-align: center;
  opacity: 1;
}
.activegray {
  opacity: 0.4 !important;
}
:deep(.clearBorder) {
  border: none;
}

:deep(.clearBorder::after) {
  border: none;
}

:deep(.clearBorder::before) {
  border: none;
}
</style>
